<template>
	<!-- 为你推荐 -->
	<view class="hot-goods u-m-b-10 u-p-x-16">

		<!-- 标题栏 -->
		<view class="title-box u-flex u-row-between u-p-y-20 groupon-title">
			<view class="u-flex u-col-center">
				<view class="title-text u-m-r-20 u-ellipsis-1"
					style="font-size: 18px;font-weight: bold;color: #333333;">{{ titleName }}</view>
			</view>
		</view>
		<view class="title-box u-flex u-row-between u-p-y-20 groupon-title" v-show="titleimage">
			<image class="goods-img"  :src="titleimage"></image>
		</view>
		<view class="u-waterfall">
				<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="leftGoods in goodsList"
					:key="leftGoods.id">
					<ljshop-goods-card
             :detail="leftGoods"
             :type="leftGoods.activity_type"
             :image="leftGoods.productImages"
						:title="leftGoods.name" :subtitle="leftGoods.caption?leftGoods.caption:''" :price="leftGoods.price"
						:originPrice="((leftGoods.price-leftGoods.cost)*rebate/100).toFixed(2)" :sales="leftGoods.sales"
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: leftGoods.id } })"  >
					</ljshop-goods-card>
			</view>
		</view>

	</view>
</template>

<script>
 
	export default {
		components: {
		 
		},
		data() {
			return {
				page: 1,
				//当前分页
				lastPage: 1, //总分页
				total: 0, //总商品数
				perPage: 0, //单页商品数
				goodsList: this.detail.productList, // 商品模板
				isRefresh: false,
				// 瀑布流 350-330
				addTime: 0, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				tempList: [],
				titleName: this.detail.name,
				titleimage: this.detail.mobileImage,
				rebatedata:this.rebate
			};
		},

		props: {
			detail: {
				type: Object,
				default: () => {}
			},
			rebate: {
				type: Number,
				default: 40
			}
		},
		created() {
			// this.splitData();
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			async splitData() {

				this.tempList = this.goodsList;
				let item = this.tempList[0];
				if (!item) return;
	 
					if(item.isMarketable){
						if (this.leftHeight < this.rightHeight) {
							this.leftHeight += 330;
							this.leftList.push(item);
						} else if (this.leftHeight > this.rightHeight) {
							this.rightHeight += 330;
							this.rightList.push(item);
						} else {
							this.leftHeight += 330;
							this.leftList.push(item);
						}
					}
				

				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;

			}

		}
	};
</script>

<style lang="scss">
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
	}

	.u-column {
	}

	.u-image {
		width: 100%;
	}

	// 为你推荐
	.hot-goods {
		background: none;

		.refresh-btn {
			margin-left: 50%;
			transform: translateX(-50%);
			width: 156rpx;
			line-height: 50rpx;
			background: #ffffff;
			border-radius: 25rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
			white-space: nowrap;
		}

		.refresh-active {
			transform: rotate(360deg);
			transition: all linear 0.5s;
		}
	}

	.big-goods {
		width: 710rpx;
		min-height: 260rpx;
		background: #ffffff;
		border-radius: 20rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		

		.card-right {
			width: 430rpx;
			height: 220rpx;
		}

		.goods-title {
			font-size: 26rpx;
			font-weight: 600;
			width: 400rpx;
			color: #000000;
			padding-top: 6rpx;

			.title-tag {
				transform: scale(0.9);
				position: relative;
				top: -6rpx;
			}
		}

		.subtitle-text {
			font-size: 22rpx;
			width: 400rpx;
			font-weight: 500;
			color: #666666;
		}

		.tag-box {
			border: 1rpx solid #ff0000;
			display: inline-block;
			font-size: 20rpx;
			line-height: 30rpx;
			padding: 0 10rpx;
			color: #ff0000;
			border-radius: 8rpx;
		}

		// 购物车
		.cart-box {
			.cart-btn {
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				padding: 0;
				background: linear-gradient(90deg, #e9b461, #eecc89);
			}

			.buy-btn {
				width: 120rpx;
				line-height: 50rpx;
				background: linear-gradient(90deg, #e9b461, #eecc89);
				border-radius: 25rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}

		// 价格
		.price {
			color: #ff0000;
			font-weight: 600;

			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}

		.origin-price {
			color: #c4c4c4;
			font-size: 24rpx;
			text-decoration: line-through;

			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}
	.goods-img {
		border-radius: 20rpx;
		width: 700rpx;
		height: 420rpx;
		margin-left: 10rpx;
	}
</style>
